<script setup lang="ts">
import {createMap} from './chinaMap.ts'
import {ref, onMounted, reactive} from "vue";

import SerialDialog from "./serialDialog.vue";
import {storeToRefs} from "pinia";
import {serialStore} from "../../store"

const dialog = ref()
const serialState = ref(false)
const map = ref()
const store = serialStore()
const storeRef = storeToRefs(store)
const serial = ref({ title: '串口号', value: storeRef.serial, list: storeRef.serialPort })

const configData = reactive({
    baud: {
        title: '波特率',
        value: storeRef.baud,
        list: storeRef.baudRate,
    },
    data: {
        title: '数据位',
        value: storeRef.data,
        list: storeRef.dataBits,
    },
})


onMounted(() => {
    createMap(map)
})

const openSerial = () => {
    console.log(storeRef)
}
const moreSerialConfig = () => {
    dialog.value.openDialog()
}


</script>

<template>
    <div style="height: 100%">
        <el-card class="serial-card" style="height: 15%; vertical-align: central">
            <!--串口配置区域-->
            <span class="config-item">
                <el-text size="default">{{ serial.title }}: </el-text>
                <el-select v-model="serial.value" :disabled="serialState" :placeholder="serial.title" size="default"
                    style="width: 100px">
                    <el-option v-for="it in serial.list" :key="it" :label="it" :value="it" />
                </el-select>
            </span>
            <span class="config-item" v-for="item in configData">
                <el-text size="default">{{ item.title }}: </el-text>
                <el-select v-model="item.value" :placeholder="item.title" size="default" style="width: 100px">
                    <el-option v-for="it in item.list" :key="it" :label="it" :value="it" />
                </el-select>
            </span>
            <el-button type="success" plain @click="moreSerialConfig">更多串口配置</el-button>
            <el-button type="success" plain @click="openSerial">开启串口</el-button>
            <serial-dialog ref="dialog"></serial-dialog>
        </el-card>
        <el-card class="serial-card"
                 style="height: 85%;"
                 body-style="height: 100%; padding: 10px">
            <div ref="map" style="height: 100%; width: 100%"></div>
        </el-card>
    </div>
</template>

<style scoped>
.serial-card {
    margin-bottom: 5px;
}

.send-bnt {
    width: 100%;
    margin: 0 5px;
    position: absolute;
}
.config-item {
    margin-right: 10px;
}
</style>